<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Button from './components/Button/Button.vue';
import type { ButtonInstance } from './components/Button/types'
const buttonRef = ref<ButtonInstance | null>(null)

onMounted(() => {
  if (buttonRef) {
    console.log(buttonRef.value.ref);
  }
})
</script>

<template>
  <div>
    <Button ref="buttonRef">Test Button</Button>
    <Button :plain="true">plain Button</Button>
    <Button :round="true">round Button</Button>
    <Button :circle="true">Lo</Button>
    <Button :disabled="true">disabled Button</Button>

    <br /><br />

    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button>

    <br /><br />

    <Button :plain="true">Plain</Button>
    <Button type="primary" :plain="true">Primary</Button>
    <Button type="success" :plain="true">Success</Button>
    <Button type="info" :plain="true">Info</Button>
    <Button type="warning" :plain="true">Warning</Button>
    <Button type="danger" :plain="true">Danger</Button>

    <br /><br />

    <Button :round="true">Round</Button>
    <Button type="primary" :round="true">Primary</Button>
    <Button type="success" :round="true">Success</Button>
    <Button type="info" :round="true">Info</Button>
    <Button type="warning" :round="true">Warning</Button>
    <Button type="danger" :round="true">Danger</Button>

    <br /><br />

    <Button :disabled="true">Default</Button>
    <Button type="primary" :disabled="true">Primary</Button>
    <Button type="success" :disabled="true">Success</Button>
    <Button type="info" :disabled="true">Info</Button>
    <Button type="warning" :disabled="true">Warning</Button>
    <Button type="danger" :disabled="true">Danger</Button>

    <br /><br />

    <Button size="large">Large</Button>
    <Button>Default</Button>
    <Button size="small">Small</Button>
  </div>
  <h1>hello word</h1>
  <h2>hello word</h2>
  <h3>hello word</h3>
  <a href="#">这是一个链接</a>

  <hr />
</template>

<style scoped></style>
